<template>
  <div>
    <j-modal
      :title="title"
      :width="width"
      :visible="visible"
      :fullscreen="true"
      switchFullscreen
      @ok="handleOk"
      :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
      @cancel="handleCancel"
      cancelText="关闭">
      <a-row>
        <a-col :span="6">
          <div class="salaryContent">
            <div class="salaryList">
              <div class="salaryItem" :key="salaryItem.id" v-for="salaryItem in salaryData">
                <div class="category">
                  <div :class="{'title':true, 'active': salaryActiveId===salaryItem.id}" @click="getItemInfo(salaryItem)">
                    <div class="content">
                      <div class="text-truncate">
                        {{ salaryItem.fieldName }}
                      </div>
                    </div>
                    <div class="record-button-group">
                      <span class="record-button" @click.stop="handleAddNewItem(salaryItem)">新建子项</span>
                      <span class="record-button" @click.stop="handleMoveItem(salaryItem)" v-show="!salaryItem.children">移动</span>
                    </div>
                  </div>
                  <div :class="{'item':true, 'active': salaryActiveId===salaryChirldItem.id}" :key="salaryChirldItem.id" v-for="salaryChirldItem in salaryItem.children" @click="getItemInfo(salaryChirldItem)">
                    <div class="content">
                      <div class="text-truncate">{{ salaryChirldItem.fieldName }}</div>
                    </div>
                    <div class="record-button-group">
                      <span class="record-button" @click.stop="handleMoveItem(salaryChirldItem)">移动</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </a-col>
        <a-col :span="18">
          <salary-fields-form ref="realForm" @ok="submitCallback" :disabled="disableSubmit"></salary-fields-form>
        </a-col>
      </a-row>
    </j-modal>
    <a-modal :visible="addvisible" title="添加子项" @ok="handleNewOk" @cancel="()=>this.addvisible=false" destroyOnClose>
      <salary-add-new-form ref="addNewForm" @ok="addNewsubmitCallback" ></salary-add-new-form>
    </a-modal>
    <a-modal :visible="movevisible" :title="moveTitile" @ok="handleMoveOk" @cancel="()=>this.movevisible=false" destroyOnClose>
      <salary-move-form ref="moveForm" @ok="moveSubmitCallback" :initData="addNewItem"></salary-move-form>
    </a-modal>
  </div>
</template>

<script>

  import SalaryFieldsForm from './SalaryFieldsForm'
  import SalaryAddNewForm from './SalaryAddNewForm'
  import SalaryMoveForm from './SalaryMoveForm'
  import { getAction, postAction, putAction } from '@/api/manage'
  export default {
    name: 'SalaryFieldsModal',
    components: {
      SalaryFieldsForm, SalaryAddNewForm, SalaryMoveForm
    },
    data () {
      return {
        title: '',
        width: 1000,
        visible: false,
        disableSubmit: false,
        salaryData: [],
        salaryActiveId: '',
        addvisible: false,
        addNewItem: {},
        movevisible: false,
        moveTitile: ''

      }
    },
    created() {
      this.getList()
    },
    methods: {
      getList() {
        getAction('/salary/salaryFields/queryList').then((res) => {
          console.log('res', res)
          if (res.code === 200) {
            this.salaryData = res.result
          }
        })
      },
      getItemInfo(val) {
        console.log('xxxxxxxxxxxx', val)
        this.salaryActiveId = val.id
        this.$refs.realForm.edit(val)
      },
      handleAddNewItem(val) {
        console.log('ssss', val)
        this.addNewItem = val
        this.addvisible = true
      },
      handleNewOk() {
        this.$refs.addNewForm.submitForm()
      },
      addNewsubmitCallback(val) {
        console.log('val', val)
        postAction('/salary/salaryFields/add', { ...val, fieldParent: this.addNewItem.id }).then((res) => {
          console.log('sds', res)
          if (res.code === 200) {
            this.getList()
            this.addvisible = false
            this.$emit('ok')
          }
        })
      },
      handleMoveItem(val) {
        this.addNewItem = val
        this.movevisible = true
        this.moveTitile = `移动薪资项 - ${val.fieldName}`
      },
      handleMoveOk() {
        this.$refs.moveForm.submitForm()
      },
      moveSubmitCallback(val) {
        console.log('yidong', val)
        putAction('/salary/salaryFields/edit', { ...this.addNewItem, ...val }).then((res) => {
          console.log('sds', res)
          if (res.code === 200) {
            this.getList()
            this.movevisible = false
            this.$emit('ok')
          }
        })
      },
      add () {
        this.visible = true
        this.$nextTick(() => {
          this.$refs.realForm.add()
        })
      },
      edit (record) {
        this.visible = true
        this.$nextTick(() => {
          this.$refs.realForm.edit(record)
        })
      },
      close () {
        this.$emit('close')
        this.visible = false
      },
      handleOk () {
        this.$refs.realForm.submitForm()
      },
      submitCallback() {
        this.$emit('ok')
        this.visible = false
      },
      handleCancel () {
        this.close()
      }
    }
  }
</script>

<style lang="less" scoped>
  .salaryContent{
    margin: 0;
    padding-left: 0;
    padding-top: 0;
    padding-right: 0;
    font-size: 12px;
    border-right:1px solid #ccc;
    .salaryItem{
        color: #333;
        cursor:pointer;
      .content{
        padding-top: 8px;
        padding-bottom: 8px;
        width: 100%;
        .text-truncate{
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      .title:hover {
        background: #f7f7f8;
        .record-button-group{
          display: block;
        }
      }
      .item, .title{
        position: relative;
        padding-right: 16px;
        padding-left: 16px;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        cursor: pointer;
    }
    .item.active, .title.active {
        background: #e7ecf6;
    }
    .item{
        padding-left: 32px;
      }
      .item:hover{
         background: #f7f7f8;
        .record-button-group{
          display: block;
        }
      }
      .record-button-group {
          display: none;
          position: absolute;
          top: 8px;
          right: 8px;
          padding-left: 8px;
          .record-button{
            padding-left: 8px;
            padding-right: 8px;
            color: #4E89F8;
          }
      }
    }
  }
</style>
